<template>
  <div>
    <!-- 活动信息展示 -->
    <HeaderInfo :inviteDetailCount="inviteDetailCount" />

    <!-- 表格区域 -->
    <a-card
      :tab-list="tabList"
      :active-tab-key="titleKey"
      @tabChange="key => onTabChange(key)"
      :bordered="false"
      class="_mt-20"
      :bodyStyle="{ padding: '0' }"
    >
      <div v-if="titleKey === 'registrationList'">
        <RegistrationList
          v-if="inviteAppUserInfoId"
          key="registrationList"
          :ref="titleKey"
          :titleKey="titleKey"
          :inviteAppUserInfoId="inviteAppUserInfoId"
        />
      </div>
      <div v-else-if="titleKey === 'browsingHistory'">
        <BrowsingHistory
          v-if="activityId && inviteAppUserInfoId"
          :ref="titleKey"
          :activityId="activityId"
          :appUserInfoId="inviteAppUserInfoId"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
/**邀约详情 */
import HeaderInfo from './headerInfo.vue'
import { getInviteDetailCount } from '@/api/activity/activity'
import InsetOfficialAccountModal from '@/components/InsetOfficialAccountModal'
import BrowsingHistory from '@/views/activity/components/browsingHistory'
import RegistrationList from '../registrationList'
import { signStatusEnum, activityStatusEnum, displayEnum, RosterApprovalStatusEnum } from '@/enums/activity'
export default {
  components: {
    HeaderInfo,
    InsetOfficialAccountModal,
    BrowsingHistory,
    RegistrationList
  },
  data() {
    return {
      RosterApprovalStatusEnum,
      activityId: undefined,
      inviteAppUserInfoId: undefined,
      titleKey: 'registrationList',
      inviteDetailCount: {},
      signStatusEnum
    }
  },
  computed: {
    tabList() {
      return [
        {
          key: 'registrationList',
          tab: '邀约报名列表'
        },
        {
          key: 'browsingHistory',
          tab: '浏览记录'
        }
      ]
    }
  },
  mounted() {
    const { activityId, inviteAppUserInfoId, tabTitleKey } = this.$route.query
    this.activityId = activityId
    this.inviteAppUserInfoId = inviteAppUserInfoId
    this.titleKey = tabTitleKey
    this.queryInviteDetailCount()
  },
  methods: {
    // 获取活动详情
    async queryInviteDetailCount() {
      const res = await getInviteDetailCount({
        activityId: this.activityId,
        appUserInfoId: this.inviteAppUserInfoId,
        tabTitleKey: this.titleKey
      })
      this.inviteDetailCount = res.data
    },

    // 刷新整个活动详情
    refreshActivityDetail() {
      this.getActivityDetails()
      this.$refs[this.titleKey].handleReset()
    },

    onTabChange(key) {
      this.titleKey = key
    }
  }
}
</script>

<style lang="less" scoped></style>
